import React, {useState} from 'react';
export default function Counter(){
  const [state, setState] = useState(function () {
    return {number: 0, name: '计数器'}
  });

  console.log('Counter render')

  return (
    <div>
      <p>{state.name}:{state.number}</p>

      <button onClick={() => setState({...state, number: state.number + 1})}>+</button>

      {/*
          16.12.0
          ↓用老的状态setState不会触发函数重新调用(渲染),你会发现多次点击下面的按钮并不会导致组件重新渲染
          ,但当我们多次点击后再点击上面的按钮,会发现不止+1了（你点几次就加了几次 在内部其实它是生效的 只是没渲染）
          ,这是因为我们点击↓的按钮的确改变了state.number的值,但因为state本身地址没有变化,故react认为它状态没有改变(浅比较),也就不会重新渲染
          (正确来说你多次点击下面的button 它会调用一次 function Counter, 触发一次 console.log('Counter render'), 但即使是这一次也不会触发渲染, 只是会执行 function Counter 非return的那部分)
      */}
      <button onClick={() => setState((state.number = state.number + 1, state))}>用老状态setState</button>
    </div>
  );
}
